<template>
  <div class="particulars">
    <navtop></navtop>
    <navtwo class="navtwo"></navtwo>
    <header>
      <div class="header_top">
        <ul>
          <li><router-link to="">商城首页</router-link></li>
          <li>></li>
          <li><router-link to="">智能手机</router-link></li>
          <li>></li>
          <li>{{ shopxinxi.name }}</li>
        </ul>
      </div>
    </header>
    <main>
      <div class="shopview">
        <div class="bigimg">
          <img :src="ImgUrl" alt="" />
          <div class="box">
            <img src="../assets/box.png" alt="" />
          </div>
        </div>
        <div class="imglist">
          <ul>
            <li
              v-for="item in shopxinxi.s_goods_photos"
              :key="item.id"
              @mouseover="qiehuan(item.path)"
            >
              <img :src="item.path" alt="" />
            </li>
          </ul>
        </div>
      </div>
      <div class="shoptext">
        <div class="title-top">
          <div class="title">
            <p>{{ shopxinxi.name }}</p>
          </div>
          <div class="text">
            {{ shopxinxi.desc }}
            <div v-html="shopxinxi.rich_text">{{ shopxinxi.rich_text }}</div>
          </div>
        </div>
        <hr />
        <div class="price_box">
          <div class="price">
            <p><span>¥</span>{{ shopxinxi.price }}.00</p>
          </div>
          <div class="gift">
            <div class="one">
              <p>赠品</p>
              <span>院线热播电影票两张</span>
            </div>
            <div class="two">
              <p>赠品</p>
              <span>购物送积分</span>
            </div>
          </div>
        </div>
        <hr />

        <div class="number">
          <div class="title">
            <p>数量</p>
          </div>
          <div class="inpnumber">
            <template>
              <el-input-number
                id="numbox"
                v-model="num"
                :min="1"
                :max="100"
                label="描述文字"
              ></el-input-number>
            </template>
          </div>
        </div>
        <hr />

        <div class="total">
          <div class="title">
            <p>总计：</p>
          </div>
          <p>{{ shopxinxi.price * num }}.00</p>
        </div>

        <div class="button_box">
          <template>
            <el-button :plain="true" @click="addCar" id="onebutton"
              >加入购物车</el-button
            >
          </template>
          <template>
            <el-button :plain="true" @click="skipCar" id="twobutton"
              >立即购买</el-button
            >
          </template>
          <!-- <button @click="addCar">加入购物车</button> -->
        </div>
      </div>
    </main>
    <bottomlist></bottomlist>
  </div>
</template>

<script>
import navtop from "../components/navtop";
import navtwo from "../components/navTwo";
import bottomlist from "../components/bottomList";
import { singleshop, AddCar } from "../api/test";
export default {
  name: "particulars",
  components: {
    navtop,
    navtwo,
    bottomlist,
  },
  data() {
    return {
      num: 1,
      ImgUrl: "",
      shopxinxi: [],
      time: 3,
    };
  },
  methods: {
    qiehuan(imgurl) {
      this.ImgUrl = imgurl;
    },
    addCar() {
      if (sessionStorage.getItem("user")) {
        let shopIdtwo = this.$route.params.id;
        AddCar({
          goods_id: shopIdtwo,
          num: this.num,
          project_id: 149,
        }).then((res) => {
          console.log(res);
          // alert("添加成功！！！！");
        });
        this.$message({
          message: "添加成功",
          type: "success",
        });
      } else {
        // if (this.time <= 0) {
        //   timeval();
        //   let timeval = setInterval(() => {
        //     this.time--;
        //     console.log(this.time);
        //   }, 1000);
        // } else {
        //   clearInterval("timeval");
        // }

        this.$message({
          message: `请先登陆哦！${this.time}秒后跳转至登陆页`,
          type: "warning",
        });
        setTimeout(() => {
          this.$router.push({ path: "/login" });
        }, 3000);
        console.log(setTimeout);
      }
    },

    skipCar() {
      if (sessionStorage.getItem("user")) {
        let shopIdtwo = this.$route.params.id;
        AddCar({
          goods_id: shopIdtwo,
          num: this.num,
          project_id: 149,
        }).then((res) => {
          console.log(res);
          this.$router.push({ path: "/shopcar" });
        });
      } else {
        this.$message({
          message: `请先登陆哦！${this.time}秒后跳转至登陆页`,
          type: "warning",
        });
        setTimeout(() => {
          this.$router.push({ path: "/login" });
        }, 3000);
      }
    },
  },
  created() {
    let shopId = this.$route.params.id;
    singleshop(shopId).then((res) => {
      console.log(res);
      this.ImgUrl = res.data.result.s_goods_photos[0].path;
      this.shopxinxi = res.data.result;
    });
  },
};
</script>

<style lang="scss" scoped>
.navtwo {
  background-color: #f7f7f7;
  position: relative;
}
.particulars {
  header {
    padding: 0 8%;
    .header_top {
      ul {
        display: flex;
        align-items: center;
        li {
          line-height: 70px;
          padding: 0 5px;
          font-size: 12px;
          a {
            color: #000;
          }
        }
      }
    }
  }
  main {
    padding: 0 8%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 50px;
    .shopview {
      width: 515px;
      .bigimg {
        position: relative;
        width: 100%;
        height: 515px;
        img {
          width: 100%;
        }

        .box {
          position: absolute;
          top: 0;
          right: 0;
        }
      }
      .imglist {
        width: 100%;
        height: 100px;
        padding-top: 30px;
        ul {
          display: flex;
          justify-content: space-around;
          li {
            width: 100px;
            height: 100px;
            img {
              height: 100%;
            }
          }
        }
      }
    }
    .shoptext {
      width: 510px;
      height: 500px;
      hr {
        color: gray;
      }
      //   background-color: red;
      .title-top {
        .title {
          p {
            font-size: 30px;
            text-align: left;
          }
        }
        .text {
          display: flex;
          margin-top: 30px;
          text-align: left;
          margin-bottom: 30px;
          font-size: 12px;
          color: red;
          :first-child {
            color: #000;
          }
        }
      }

      .price_box {
        margin-top: 30px;
        margin-bottom: 30px;
        display: flex;
        .price {
          width: 50%;

          p {
            font-size: 30px;
            color: red;
            letter-spacing: 3px;
            span {
              display: inline-block;
              margin-right: 5px;
              font-size: 20px;
            }
          }
        }
        .gift {
          width: 50%;
          border-left: 1px solid gray;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .one,
          .two {
            display: flex;
            align-items: center;
            p {
              background-color: red;
              color: #fff;
              padding: 2px 5px;
              margin: 0 10px;
            }
            span {
              font-size: 16px;
            }
          }
        }
      }

      .number {
        margin-top: 30px;
        text-align: left;
        margin-bottom: 30px;
        .title {
          p {
            font-size: 25px;
          }
        }
        .inpnumber {
          margin-top: 20px;
        }
      }

      .total {
        display: flex;
        align-items: center;
        text-align: left;
        margin-top: 30px;
        .title {
          p {
            font-size: 25px;
            color: #000;
            font-weight: 700;
          }
        }
        p {
          font-size: 30px;
          color: red;
        }
      }

      .button_box {
        margin-top: 40px;
        display: flex;
        justify-content: space-around;

        #onebutton,
        #twobutton {
          width: 200px;
          height: 60px;
          border-radius: 60px;
          border: none;
          color: #fff;
          background-color: #e63541;
        }

        #onebutton {
          background-color: #444;
        }
      }
    }
  }
}
</style>